﻿@page
@model IndexModel
@{
    ViewData["Title"] = "点餐";
}

<div class="mui-content mui-row mui-fullscreen">
    <div class="mui-col-xs-3">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
        </div>
    </div>
    <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
        <div id="item1" class="mui-control-content mui-active">
        </div>
        <div id="item2" class="mui-control-content">
        </div>
        <div id="item3" class="mui-control-content">
        </div>
    </div>
</div>

@section headCss{
    <style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
		</style>
}

@section bodyJs{
    <script type="text/javascript">
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        var controls = document.getElementById("segmentedControls");
        var contents = document.getElementById("segmentedControlContents");
        var html = [];
        var i = 1,
            j = 1,
            m = 16, //左侧选项卡数量+1
            n = 21; //每个选项卡列表数量+1
        for (; i < m; i++) {
            html.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');
        }
        controls.innerHTML = html.join('');
        html = [];
        for (i = 1; i < m; i++) {
            html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
            for (j = 1; j < n; j++) {
                html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
            }
            html.push('</ul></div>');
        }
        contents.innerHTML = html.join('');
        //默认选中第一个
        controls.querySelector('.mui-control-item').classList.add('mui-active');
        contents.querySelector('.mui-control-content').classList.add('mui-active');
    </script>
}
